---
import type { ImageMetadata } from 'astro';
import { Image } from 'astro:assets';

interface Props {
	href: string;
	title: string;
	thumbnail: string;
}
const { href, title } = Astro.props;

const thumbnails = import.meta.glob<{ default: ImageMetadata }>(
	'../assets/thumbnails/*{.png,.jpg,.jpeg,.webp,.avif}'
);
const thumbnail = thumbnails[`../assets/thumbnails/${Astro.props.thumbnail}`];
if (!thumbnail) {
	throw new Error(`Could not resolve showcase thumbnail: ${Astro.props.thumbnail}`);
}
const src = (await thumbnail()).default;
---

<li>
	<a class="showcase-card" {href}>
		<span class="image"><Image {src} alt="" width="560" /></span>
		<span class="title">{title}</span>
	</a>
</li>

<style>
	li {
		display: flex;
	}
	.showcase-card {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--sl-color-gray-5);
		border-radius: 0.5rem;
		overflow: hidden;
		text-decoration: none;
		box-shadow: var(--sl-shadow-sm);
	}
	.showcase-card:hover {
		border-color: var(--sl-color-gray-2);
		background-color: var(--sl-color-gray-7, var(--sl-color-gray-6));
	}
	.title {
		color: var(--sl-color-white);
		padding: 0.75rem 1rem;
		font-weight: 600;
		line-height: var(--sl-line-height-headings);
	}
	.image {
		border-bottom: 1px solid var(--sl-color-gray-5);
	}

	.image img {
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
</style>
